<template>
  <div class="layout-page bg-#f8f9fe pt-28px">
    <div class="layout-page-inner box-border bg-#fff w-95% p-32px">
      <div class="flex items-center">
        <h2 class="text-center fw-500 font-size-28px">创建工单</h2>
        <div class="flex-1 inline-flex justify-center">
          <el-steps
            process-status="finish"
            finish-status="success"
            style="width: 500px"
            class="w-400px"
            :active="active"
          >
            <el-step title="选择问题类型"></el-step>
            <el-step title="创建工单"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="w-full h-2px tag-bg-color my-32px"></div>
      <div v-show="active === 0">
        <span class="block mb-20px">选择问题类型:</span>
        <div class="flex flex-wrap">
          <div
            v-for="item in questionList"
            :key="item.value"
            class="question-item"
            :class="{
              'question-item__selected': formData.workOrderTitle === item.value,
            }"
            @click="formData.workOrderTitle = item.value"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
      <div v-show="active === 1">
        <el-form
          class="apply-form w-60% mx-auto"
          ref="form"
          :model="formData"
          :rules="formRules"
          label-position="right"
          :label-width="130"
        >
          <el-form-item label="姓名" prop="contactUser">
            <el-input
              v-model="formData.contactUser"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="contactUserEmail">
            <el-input
              v-model="formData.contactUserEmail"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="contactUserMobile">
            <el-input
              v-model="formData.contactUserMobile"
              placeholder="请输入手机号"
              :maxlength="11"
            ></el-input>
          </el-form-item>
          <el-form-item label="问题描述" prop="workOrderDesc">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              v-model="formData.workOrderDesc"
              placeholder="请输入问题描述"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="text-center mt-40px">
        <el-button size="large" class="w-100px" @click="$router.go(-1)"
          >返回</el-button
        >
        <el-button
          v-if="active === 0"
          :disabled="!formData.workOrderTitle"
          type="primary"
          size="large"
          class="w-100px"
          @click="++active"
          >下一步</el-button
        >
        <template v-else-if="active === 1">
          <el-button size="large" class="w-100px" @click="--active"
            >上一步</el-button
          >
          <el-button
            type="primary"
            size="large"
            :loading="loading"
            class="w-100px"
            @click="createOrder"
            >提交工单</el-button
          >
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useDict, useLoading } from "@/hooks";
import { useUserStore } from "@/store";

const $api = inject("$api");
const router = useRouter();
const active = ref(0);
const userStore = useUserStore();

const { loading, setLoading } = useLoading();
const { list: questionList } = useDict("work_order");

const form = ref();
const formData = ref({
  contactUser: "",
  contactUserEmail: "",
  contactUserMobile: "",
  workOrderDesc: "",
  workOrderTitle: "",
});
const formRules = reactive({
  contactUser: [{ required: true, message: " 请输入姓名" }],
  contactUserMobile: [{ required: true, message: " 请输入手机号" }],
  workOrderDesc: [{ required: true, message: " 请输入问题描述" }],
});

const initForm = async () => {
  if (!userStore.userInfo) await userStore.getUserInfo();
  const {
    nickName: contactUser,
    phonenumber: contactUserMobile,
    email: contactUserEmail,
  } = userStore.userInfo;

  formData.value = {
    contactUser,
    contactUserMobile,
    contactUserEmail,
  };
};

const createOrder = () => {
  form.value.validate(async (valid) => {
    if (valid) {
      setLoading(true);
      try {
        await $api.order.createOrder(formData.value);
        ElMessage.success("创建成功");
        setTimeout(() => {
          router.push({ name: "MyOrder" });
        }, 500);
      } finally {
        setLoading(false);
      }
    }
  });
};

onMounted(() => {
  initForm();
});
</script>

<style lang="less" scoped>
.question-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: calc((100% - 40px) / 4);
  margin-right: 10px;
  margin-bottom: 10px;
  height: 44px;
  border-radius: 4px;
  background: #f6f8fa;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(213, 219, 227, 0.5);
  padding: 0 12px;
  cursor: pointer;
  &:hover {
    box-shadow: 0 1px 1px rgba(0, 110, 255, 0.1), 0 0 0 1px #1664ff;
  }
  &.question-item__selected {
    background: rgba(162, 193, 255, 0.2);
    box-shadow: 0 1px 1px rgba(0, 110, 255, 0.1), 0 0 0 1px #1664ff;
    color: #1664ff;
  }
}
</style>
